<template>
	<view class="container">
		<!-- 顶部导航栏 -->
<!-- 		<view class="nav-bar">
			<view class="left">
				<u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
			</view>
			<view class="title">意见反馈</view>
			<view class="right"></view>
		</view> -->
		
		<!-- 内容区域 -->
		<view class="content">
			<!-- 反馈类型 -->
			<view class="section">
				<view class="section-title">反馈类型</view>
				<view class="type-list">
					<view class="type-item" 
						v-for="(item, index) in feedbackTypes" 
						:key="index"
						:class="{'active': selectedTypes.includes(index)}"
						@click="selectType(index)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
			
			<!-- 反馈内容 -->
			<view class="section">
				<view class="section-title">反馈内容</view>
				<view class="textarea-box">
					<textarea 
						v-model="content" 
						placeholder="请详细描述您遇到的问题或建议..."
						maxlength="500"
						:adjust-position="false"
					></textarea>
					<view class="word-count">{{content.length}}/500</view>
				</view>
			</view>
			
			<!-- 图片上传 -->
			<view class="section">
				<view class="section-title">上传图片，最多三张（选填）</view>
				<view class="upload-box">
					<fileUpload 
						v-model:ossIds="ossImageIds" 
						:maxCount="3" 
						:show-count="true"
					/>
<!-- 					<view class="image-list">
						<view class="image-item" v-for="(item, index) in images" :key="index">
							<image :src="item" mode="aspectFill"></image>
							<view class="delete-btn" @click="deleteImage(index)">
								<u-icon name="close" color="#fff" size="24"></u-icon>
							</view>
						</view>
						<view class="upload-btn" @click="chooseImage" v-if="images.length < 3">
							<u-icon name="camera" size="40" color="#999"></u-icon>
							<text>{{images.length}}/3</text>
						</view>
					</view> -->
				</view>
			</view>
			
			<!-- 联系方式 -->
			<view class="section">
				<view class="section-title">联系方式（选填）</view>
				<view class="input-box">
					<input type="text" v-model="contact" placeholder="请留下您的手机号或邮箱"/>
				</view>
			</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" :class="{'disabled': !canSubmit}" @click="submit">
			<text>提交反馈</text>
		</view>
	</view>
</template>

<script>
import { submitFeedback } from '@/common/api.js'
export default {
	data() {
		return {
			feedbackTypes: ['界面问题', '数据错误', '安全问题', '功能建议', '故障问题', '其他'],
			selectedTypes: [], // 支持多选
			content: '',
			images: [],
			ossImageIds: [1,2,3], // 上传后返回的 OSS id 数组
			contact: ''
		}
	},
	computed: {
		canSubmit() {
			return this.selectedTypes.length > 0 && this.content.length > 0
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		selectType(index) {
			const i = this.selectedTypes.indexOf(index)
			if (i !== -1) {
				this.selectedTypes.splice(i, 1)
			} else {
				this.selectedTypes.push(index)
			}
		},
		chooseImage() {
			uni.chooseImage({
				count: 3 - this.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.images = [...this.images, ...res.tempFilePaths]
					
					// 模拟上传返回 id
					res.tempFilePaths.forEach(path => {
						// 实际开发中应使用上传接口，返回 ossId 后再 push
						const mockOssId = 'oss_' + Date.now() + Math.floor(Math.random() * 1000)
						this.ossImageIds.push(mockOssId)
					})
				}
			})
		},
		deleteImage(index) {
			this.images.splice(index, 1)
			this.ossImageIds.splice(index, 1)
		},
		async submit() {
			if (!this.canSubmit) return;

			uni.showLoading({
				title: '提交中...'
			});

			const selectedTypeValues = this.selectedTypes.map(index => this.feedbackTypes[index]);

			// 构造反馈数据
			const feedback = {
				strokeFeedbackType: selectedTypeValues.join(','), // 转为逗号分隔字符串
				content: this.content,
				credential: this.ossImageIds.join(','), // 转为逗号分隔字符串
				phone: this.contact
			};
			console.log('反馈内容:', feedback);

			try {
				const res = await submitFeedback(feedback);
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} catch (error) {
				uni.showToast({
					title: error.message || '提交失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		}
	}  // <-- 这里关闭 methods 对象
}  // <-- 这里关闭 export default 对象
</script>


<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #F7F7FA;
		padding-bottom: 120rpx;
		
		.nav-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}
		
		.content {
			padding: 30rpx;
			
			.section {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 30rpx;
				margin-bottom: 30rpx;
				
				.section-title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20rpx;
				}
				
				.type-list {
					display: flex;
					flex-wrap: wrap;
					margin: 0 -10rpx;
					
					.type-item {
						width: calc(50% - 25rpx);
						height: 80rpx;
						margin: 10rpx;
						background-color: #F7F7FA;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						text {
							font-size: 28rpx;
							color: #333;
						}
						
						&.active {
							background-color: #E6F7FF;
							border: 2rpx solid #1890FF;
							
							text {
								color: #1890FF;
							}
						}
					}
				}
				
				.textarea-box {
					background-color: #F7F7FA;
					border-radius: 8rpx;
					padding: 20rpx;
					position: relative;
					
					textarea {
						width: 100%;
						height: 300rpx;
						font-size: 28rpx;
						color: #333;
						line-height: 1.5;
					}
					
					.word-count {
						position: absolute;
						right: 20rpx;
						bottom: 20rpx;
						font-size: 24rpx;
						color: #999;
					}
				}
				
				.upload-box {
					.image-list {
						display: flex;
						flex-wrap: wrap;
						margin: 0 -10rpx;
						
						.image-item {
							width: calc(33.33% - 20rpx);
							height: 200rpx;
							margin: 10rpx;
							position: relative;
							
							image {
								width: 100%;
								height: 100%;
								border-radius: 8rpx;
							}
							
							.delete-btn {
								position: absolute;
								top: -10rpx;
								right: -10rpx;
								width: 40rpx;
								height: 40rpx;
								background-color: rgba(0, 0, 0, 0.5);
								border-radius: 20rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
						
						.upload-btn {
							width: calc(33.33% - 20rpx);
							height: 200rpx;
							margin: 10rpx;
							background-color: #F7F7FA;
							border-radius: 8rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							
							text {
								font-size: 24rpx;
								color: #999;
								margin-top: 10rpx;
							}
						}
					}
				}
				
				.input-box {
					background-color: #F7F7FA;
					border-radius: 8rpx;
					padding: 0 20rpx;
					
					input {
						height: 80rpx;
						font-size: 28rpx;
						color: #333;
					}
				}
			}
		}
		
		.submit-btn {
			position: fixed;
			bottom: 40rpx;
			left: 30rpx;
			right: 30rpx;
			height: 88rpx;
			background-color: #1890FF;
			border-radius: 44rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			text {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
			
			&.disabled {
				background-color: #ccc;
				opacity: 0.6;
			}
		}
	}
</style> 